<template>
    <div class="test-content">
        <div class="left-require">
            <div>
                <img style="width: 100%;" src="../../statics/img/form-list.jpg" alt="">
                <h2>1、在右侧空白区域按照图片所示完成表单(可使用elementui)，并添加表单验证，点击保存时如果验证通过，将表单数据保存到vuex中</h2>
                <h2>2、在右侧空白区域以键值对的形似显示保存到vuex的数据</h2>
                <h2>3、给首页的 "跳转表单按钮" 添加点击事件，点击后可跳转到本页面，并读取上一次验证通过并保存到的vuex中的数据，显示到表单</h2>
                <h2>4、给身份证号码、电话号码添加正则验证，毕业时间需比入学时间晚3年</h2>
                <h2 style="color: red">确认完成所有测试后需使用webpack将代码打包到文件夹dist</h2>
            </div>
        </div>

        <div class="right-content">
            <!--代码区域-->
            <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
                <el-form-item prop="name" label="学生名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item prop="idCard" label="身份证号码">
                    <el-input v-model="form.idCard"></el-input>
                </el-form-item>
                <el-form-item prop="tel" label="电话号码">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item required label="性别">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="nation" label="民族">
                    <el-select v-model="form.nation" placeholder="请选择民族">
                        <el-option label="汉族" value="1"></el-option>
                        <el-option label="少数民族" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="date1" label="入学时间">
                    <el-date-picker type="date" placeholder="选择日期时间" v-model="form.date1"
                        style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item prop="date2" label="毕业时间">
                    <el-date-picker type="date" placeholder="选择日期时间" v-model="form.date2"
                        style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item prop="type" label="所选课程">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="语文" name="type"></el-checkbox>
                        <el-checkbox label="数学" name="type"></el-checkbox>
                        <el-checkbox label="英语" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">清空</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
//测试一：
//1、按照图片完成表单，并添加表单验证，点击保存时如果验证通过，将表单数据保存到vuex中
//2、在右侧空白区域以键值对的形似显示保存到vuex的数据
//3、给首页的 "跳转表单按钮" 添加点击事件，点击后可跳转到本页面，并读取vuex中的数据，显示到表单

//实际项目中，校验方法可单独封装起来提高复用率
let validatePass1 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入身份证号码'));
    } else if (!/(^\d{18}$)|(^\d{17}(\d|X)$)/.test(value)) {
        callback(new Error('身份证号码有误！'));
    } else {
        callback();
    }
}
let validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入电话号码'));
    } else if (!/^1[3-9][0-9]\d{8}$/.test(value)) {
        callback(new Error('电话号码有误！'));
    } else {
        callback();
    }
}
let isOverYear = (beginDate, endDate, num) => {
    let begin = new Date(beginDate).getTime();
    let end = new Date(endDate).getTime();
    let day = (end - begin) / (24 * 60 * 60 * 1000);
    console.log(day)
    if (day >= 365 * num) {
        return true;
    } else {
        return false; 
    }
}


export default {
    name: "test_2",
    computed: {
        ...mapState({
            formdata: state => state.formData
        })
    },
    data() {
        let validatePass3 = (rule, value, callback) => {
            if (!this.form.date1) {
                callback(new Error('请选择入学时间'));
            } else if (value === '') {
                callback(new Error('请选择毕业时间'));
            } else if (!isOverYear(this.form.date1, value, 3)) {
                callback(new Error('毕业时间需比入学时间晚三年'));
            } else {
                callback();
            }
        }
        return {
            form: {
                name: '',
                idCard: '',
                tel: '',
                sex: '女',
                nation: '',
                date1: '',
                date2: '',
                type: ['语文', '数学'],
                desc: ''
            },
            rules: {

                name: [
                    { required: true, message: '请输入学生名称', trigger: 'blur' },
                ],
                idCard: [
                    { validator: validatePass1, trigger: 'blur' }
                ],
                tel: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'blur' },
                ],
                date1: [
                    { required: true, message: '请选择日期', trigger: 'blur' },
                ],
                date2: [
                    { validator: validatePass3, trigger: 'change' }
                ],
                type: [
                    { required: true, message: '请选择课程', trigger: 'blur' },
                ],
            }
        }
    },
    mounted() {
        this.form = this.formdata
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$store.commit('saveFormData', this.form)
                    this.$alert('提交成功，跳转到首页', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                           this.$router.push('/test_1') 
                        }
                    });
                } else {
                    this.$message.error('提交失败');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

    }
}
</script>

<style scoped>
.right-content {
    box-sizing: border-box;
    height: 100%;
    padding: 50px;
    overflow: scroll;
}
</style>